<template>
  <div class="menu-content-attribute-version">
    <a-button @click="layoutGraph" class="button-layout-graph">
      重置视角
    </a-button>
    <div class="select-zoom">
      <select-zoom v-model:zoom="zoom" />
    </div>
    <div class="icon-zoom-in">
      <icon-zoom-in v-model:zoom="zoom" />
    </div>
    <div class="icon-zoom-out">
      <icon-zoom-out v-model:zoom="zoom" />
    </div>
    <a-spin :spinning="loading" v-if="loading" />
    <vue-flow
      v-else
      :nodes="nodes"
      :edges="edges"
      @nodes-initialized="layoutGraph('LR')"
      :nodes-connectable="false"
    >
      <template #node-simple-custom="props">
        <node-simple-custom v-bind="props" />
      </template>
      <template #edge-relation-custom="props">
        <edge-relation-custom v-bind="props" />
      </template>
      <template #edge-version-custom="props">
        <edge-version-custom v-bind="props" />
      </template>
    </vue-flow>
  </div>
</template>
<script setup>
import { nextTick, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import SelectZoom from './menu-content-attribute-version-zoom-select.vue'
import IconZoomIn from './menu-content-attribute-version-zoom-in.vue'
import IconZoomOut from './menu-content-attribute-version-zoom-out.vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'
import NodeSimpleCustom from './version-elements/node-simple.vue'
import EdgeRelationCustom from './version-elements/edge-relation.vue'
import EdgeVersionCustom from './version-elements/edge-version.vue'

import { useLayout } from './hooks/useLayout.js'
import mockAPI from '@/api/simple-mock.js'
import { initialEdges, initialNodes } from './mock-data.js'

// initialEdges.forEach(edge => {
//   let { source, target, sourceHandle, targetHandle } = edge
//   //children
//   let nodeSource = initialNodes.find(({ id }) => id === source)
//   if (!nodeSource.data.children) {
//     nodeSource.data.children = []
//   }
//   nodeSource.data.children.push({ id: target, link: sourceHandle })
//   //parent
//   let nodeTarget = initialNodes.find(({ id }) => id === target)
//   if (!nodeTarget.data.parent) {
//     nodeTarget.data.parent = []
//   }
//   nodeTarget.data.parent.push({ id: source, link: targetHandle })
// })
// console.log(initialNodes)
// initialNodes.sort((p, n) => {
//   if (
//     ['2a', '2c'].includes(p.id) &&
//     ['2a', '2c'].includes(n.id)
//     // data.children.includes('2a') &&
//     // data.children.includes('2c')
//   ) {
//     debugger
//   }
//   let sameParent = initialNodes.some(({ data }) => {
//     if (data.children) {
//       if (
//         ['2a', '2c'].includes(p.id) &&
//         ['2a', '2c'].includes(n.id)
//         // data.children.includes('2a') &&
//         // data.children.includes('2c')
//       ) {
//         debugger
//       }
//       let infoP = data.children.find(({ id }) => {
//         return id === p.id
//       })
//       let infoN = data.children.find(({ id }) => {
//         return id === n.id
//       })

//       return infoP && infoN && infoP.link === infoN.link
//     }
//   })
//   let sameChilren = initialNodes.some(({ data }) => {
//     if (data.parent) {
//       let infoP = data.parent.find(({ id }) => id === p.id)
//       let infoN = data.parent.find(({ id }) => id === n.id)
//       return infoP && infoN && infoP.link === infoN.link
//     }
//   })
//   return sameParent || sameChilren ? 1 : -1
// })

/**
 * 全局
 */
let route = useRoute()
/**
 * 加载数据
 */
let loading = ref(false)
onMounted(async () => {
  loading.value = true
  try {
    await mockAPI({
      id: route?.params?.id,
    })
  } catch (e) {}
  loading.value = false
})

/**
 * 图
 */
let zoom = ref(1)
let nodes = ref(initialNodes)
let edges = ref(initialEdges)
let { layout } = useLayout()
let { fitView, getViewport, onViewportChange } = useVueFlow()
//布局
async function layoutGraph(direction) {
  nodes.value = layout(nodes.value, edges.value, direction)
  nextTick(() => {
    fitView()
  })
}
//监听鼠标滚轮
onViewportChange(() => {
  let { zoom: z } = getViewport()
  zoom.value = z
})
</script>
<style lang="less" scoped>
.menu-content-attribute-version {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .button-layout-graph {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .select-zoom {
    position: absolute;
    top: 5px;
    right: 70px;
    z-index: 1;
  }
  .icon-zoom-in {
    position: absolute;
    top: 12px;
    right: 0;
    z-index: 1;
  }
  .icon-zoom-out {
    position: absolute;
    top: 12px;
    right: 36px;
    z-index: 1;
  }
}
</style>
